<template>
   <div class="box">
      <div class="h1">
         <span class="el-icon-search"></span>
       <input type="text" ref="oop" placeholder="搜索备忘录(标题,内容)" @click="search">
       <span class="span">取消</span>
      </div>
        <div v-for="(item, index) in def" :key="index" class="box1" @click="tz(def[index])">
      <div class="box4">
        <h4>{{ item.day }}</h4>
        <span>{{ item.yue }}月</span>
      </div>
      <div class="box5">
        <p class="p1">{{ item.ipt }}</p>
        <span class="span2">{{ item.shi }}</span>
      </div>
      <div class="box2">
        <router-link :to="{ path: '/editor/' + index }" class="a">
          <!-- <div @click="fun(index)"> -->
            <span class="span">编辑</span>
          <!-- </div> -->
        </router-link>
        <span class="span1" @click="remove(index)">刪除</span>
      </div>
    </div>
   </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState({
    def: (state) => state.list
  }),
  methods: {
    search(){
      let a88 = new RegExp(this.$refs.oop.value);
      console.log(a88);
      this.def.forEach(element => {
        console.log(element);
        if(a88.test(element.ipt)===true){
          console.log(element.ipt);
          element.ql = true
        }else{
          element.ql = false
          console.log(element.ipt);
        }
      });
    }
  },
}
</script>

<style scoped>
    *{
     margin: 0px;
     padding: 0px;
   }
   .h1{
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: coral;
    }
    .h1 input{
      border-radius: 5px;
      border: none;
      width: 75%;
      height: 40px;
      padding-left: 28px;
    }
    .h1 .el-icon-search{
      position: relative;
      top: 3px;
      left: 23px;
      font-size: 18px;
    }
    .h1 .span{
      display: inline-block;
      height: 30px;
      line-height: 30px;
      color: #fff;
      margin-left: 8px;
    }
    a{
  text-decoration: none;
  color: #333;
}
.box1 {
  height: 100px;
  border-radius: 10px;
  background-color: #eeeeee;
  margin: 15px 20px;
}
.box2 {
  position: relative;
  bottom: -43px;
  text-align: right;
  margin-right: 15px;
}
.box2 span {
  margin: 0px 8px;
}
h4 {
  font-size: 22px;
  margin-top: 25px;
}
.box4 {
  width: 100px;
  height: 100px;
  float: left;
  border-right: 1px solid #333;
}
.p1 {
  padding-top: 10px;
  padding-left: 10px;
  text-align: center;
  margin: 0px;
}
.a {
  text-decoration: none;
  color: #333;
}
.box .el-icon-plus {
  padding-top: 10px;
  text-decoration: none;
  width: 120px;
  height: 50px;
  font-size: 18px;
  border: 1px solid #333;
  border-radius: 20px;
  color: #333;
  position: absolute;
  bottom: 50px;
  right: 130px;
}
.box  .span,.span1{
  z-index: 99;
}
.span2 {
  font-size: 18px;
  position: relative;
  top: 40px;
  left: -93px;
}
.box5 .box3{
  display: inline-block;
  line-height: 59px;
  position: relative;
  right: 45px;
}
.box5{
  display: flex;
  justify-content: space-between;
}
.box5 input{
  height: 40px;
  line-height: 40px;
  border: none;
  outline: none;
  border: 1px solid #999;
  border-radius: 10px;
  margin-left: 20px;
  margin-top: 10px;
}
</style>
